<template>
  <up-transition :show="show">
    <view class="diy-modal">
      <view class="diy-modal-content">
        <div class="flex-1 h-0 flex items-center justify-center">
          {{ config.contentText }}
        </div>
        <div class="bts flex items-center justify-center">
          <div @click="clickCancel" class="bt">{{ config.cancelText }}</div>
          <div @click="clickConfirm" class="bt confirm m-l-20">
            {{ config.confirmText }}
          </div>
        </div>
      </view>
    </view>
  </up-transition>
</template>

<script setup>
import { ref } from "vue";
const props = defineProps({});

const config = ref({
  confirmText: "确定",
  cancelText: "取消",
  contentText: "是否确定提交本次操作",
});

const show = ref(false);
const open = (cfg = {}) => {
  return new Promise((resolve, reject) => {
    config.value = Object.assign(config.value, cfg);
    show.value = true;
    config.value.onConfirm = () => {
      resolve(true);
    };
    config.value.onCancel = () => {
      reject(false);
    };
  });
};
function clickCancel() {
  show.value = false;
  emit("cancel");
  config.value.onCancel();
}
function clickConfirm() {
  show.value = false;
  emit("confirm");
  config.value.onConfirm();
}
defineExpose({
  open,
});
const emit = defineEmits(["cancel", "confirm"]);
</script>
<style lang="scss" scoped>
.diy-modal {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10076;
  background: rgba($color: #000000, $alpha: 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  .diy-modal-content {
    min-width: 500rpx;
    min-height: 260rpx;
    padding: 20rpx 40rpx;
    text-align: center;
    font-size: 18rpx;
    background: #fff;
    border-radius: 20rpx;

    display: flex;
    flex-direction: column;

    .bt {
      min-width: 120rpx;
      min-height: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18rpx;
      font-weight: 500;
      border: 1px solid $uni-border-color-1;
      border-radius: 8rpx;
      color: #606266;
    }
    .confirm {
      border: 0;
      background: $uni-color-error;
      color: $uni-text-color-inverse;
    }
  }
}
</style>
